<style lang="scss" scoped>
.xjw-popup_head-box {
  box-shadow: 0 12upx 38upx 0 rgba(0, 0, 0, 0.06);
  line-height: 1;
  .xjw-popup_head {
    display: flex;
    justify-content: space-between;
    padding: 0 32upx;
    .xjw-popup_title {
      margin-top: 16upx;
      flex: 1;
      font-size: 48upx;
      color: $f303133;
    }
    .xjw-popup_close {
      width: 48upx;
      height: 48upx;
      background: #f8f8f8;
      border-radius: 50%;
      font-size: 24upx;
      text-align: center;
      line-height: 48upx;
      color: $f606266;
    }
  }
  .xjw-popup_other {
    color: #f33a3a;
    font-size: 28upx;
    margin-top: 32upx;
  }
}

.fix-scroll--scroll {
  flex: 1;
  height: 0;
  .scroll-content {
    height: 100%;
  }
}
</style>
<template>
  <xjw-popup
    v-model="value"
    width="100%"
    mode="bottom"
    :height="height"
    @open="open"
    @close="close"
    :duration="duration"
    :is-popup="false"
    :user-style="borderStyle"
    :to-px="toPx"
  >
    <view class="xjw-popup_head-box" :style="{ padding: padding }">
      <view class="xjw-popup_head">
        <view class="xjw-popup_title" v-if="!customTitle">{{ title }}</view>
        <slot name="title"></slot>
        <view class="xjw-popup_close iconfont xjw-guanbi" @tap.stop="close">
        </view>
      </view>
      <view
        class="xjw-popup_other"
        v-if="isOther"
        :style="{ padding: otherPad }"
      >
        <slot name="other"></slot>
      </view>
    </view>
    <view :class="{ 'fix-scroll--scroll': isScroll }">
      <scroll-view class="scroll-content" :scroll-y="true">
        <slot></slot>
      </scroll-view>
    </view>
    <view class="xjw-popup_foot">
      <slot name="foot"></slot>
    </view>
  </xjw-popup>
</template>

<script lang="ts">
import { Component, Mixins, Prop } from "vue-property-decorator";
import popMixin from "../xjw-popup/popMixin";
@Component
export default class Index extends Mixins(popMixin) {
  @Prop({ type: Boolean, default: true }) isOther;
  @Prop({ type: String, default: "48rpx 0rpx" }) padding;
  @Prop({ type: String, default: "0 32rpx" }) otherPad;
  @Prop({ type: Boolean, default: false }) customTitle; // 是否自定义标题
  get isScroll() {
    return !!this.height;
  }
  created() {
    this.borderStyle.borderRadius = `${uni.upx2px(
      this.borderRadius
    )}px ${uni.upx2px(this.borderRadius)}px 0 0`;
  }
}
</script>
